import React, { Component } from 'react';
import { Table, Card, Button, Dropdown, Icon, Menu } from 'antd';
import { connect } from 'dva';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

const ButtonGroup = Button.Group;

const menu = (
  <Menu>
    <Menu.Item key="1">
      <Icon type="file-add" />
      新建代理
    </Menu.Item>
    <Menu.Item key="2">
      <Icon type="diff" />
      从模板导入
    </Menu.Item>
    <Menu.Item key="3">
      <Icon type="check-square" />
      模板管理
    </Menu.Item>
    <Menu.Item key="4" disabled>
      <Icon type="solution" />
      批量编辑
    </Menu.Item>
    <Menu.Item key="5" disabled>
      <Icon type="wallet" />
      批量收回
    </Menu.Item>
    <Menu.Item key="6">
      <Icon type="profile" />
      显示列定制
    </Menu.Item>
    <Menu.Item key="7">
      <Icon type="question-circle" />
      帮助
    </Menu.Item>
  </Menu>
);
const action = (
  <>
    <ButtonGroup>
      <Button>新建代理</Button>
      <Button>从模板导入</Button>
      <Button>模板管理</Button>
      <Button disabled>批量编辑</Button>
      <Button disabled>批量收回</Button>
    </ButtonGroup>
    <Dropdown overlay={menu} placement="bottomRight">
      <Button>
        <Icon type="bars" />
      </Button>
    </Dropdown>
  </>
);

@connect(({ procedure, loading }) => ({
  procedure,
  proxyLoading: loading.effects['procedure/fetchProxy'],
}))
class ProcedureProxy extends Component {
  state = {
    currentTodoType: 'settings',
    tableLoading: false,
  };

  columns = [
    {
      title: '被代理人',
      dataIndex: 'principal',
      key: 'principal',
    },
    {
      title: '代理人',
      dataIndex: 'agent',
      key: 'agent',
    },
    {
      title: '创建人',
      dataIndex: 'creator',
      key: 'creator',
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
    },
    {
      title: '路径',
      dataIndex: 'path',
      key: 'path',
    },
    {
      title: '开始时间',
      dataIndex: 'startAt',
      key: 'startAt',
    },
    {
      title: '结束时间',
      dataIndex: 'end',
      key: 'end',
    },
    {
      title: '当前状态',
      dataIndex: 'status',
      key: 'status',
    },
  ];

  tabTypeList = [
    {
      key: 'settings',
      tab: '我的代理设置',
    },
    {
      key: 'proxyflows',
      tab: '我代理的流程',
    },
    {
      key: 'tootherstodo',
      tab: '交办他人的流程',
    },
    {
      key: 'allproxysettings',
      tab: '全部代理设置',
    },
  ];

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'procedure/fetchProxy',
    });
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'procedure/clear',
    });
  }

  handleTypeChange = key => {
    this.setState(
      {
        currentTodoType: key,
        tableLoading: true,
      },
      () => {
        setTimeout(() => {
          this.setState({
            tableLoading: false,
          });
        }, 250);
      }
    );
  };

  render() {
    const {
      proxyLoading,
      procedure: { proxyList },
    } = this.props;
    const { tableLoading, currentTodoType } = this.state;

    const proxyData = currentTodoType === 'allproxysettings' ? proxyList : [];

    return (
      <PageHeaderWrapper
        title="流程代理"
        tabActiveKey={currentTodoType}
        tabList={this.tabTypeList}
        onTabChange={this.handleTypeChange}
        extra={action}
      >
        <Card bordered={false} loading={proxyLoading}>
          <Table dataSource={proxyData} columns={this.columns} loading={tableLoading} />
        </Card>
      </PageHeaderWrapper>
    );
  }
}

export default ProcedureProxy;
